<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import useMenusStore from "../../store/menusStore";
import Dialog from "./dialog.vue";
import { getMenusApi } from "@/api/menusApi";
const menusStore = useMenusStore();

const dialog = ref(null);
const treeData = ref([]);
onBeforeMount(() => {
  // 获取菜单数据
  menusStore.getMenusAction();
  getData();
});

const getData = async () => {
  const res = await getMenusApi();
  treeData.value = res.msg;
  console.log(res);
};
// 新增菜单
function addMenu() {
  // 打开对话框
  menusStore.openDialog();
}
// 编辑菜单
function editMenu(menu) {
  // console.log(menu,'编辑')
  dialog.value.editId = menu.id;
  // dialog.value.menuForm.pid = menu.pid
  // dialog.value.menuForm.type = menu.type
  // dialog.value.menuForm.title = menu.title
  // dialog.value.menuForm.icon = menu.icon
  // dialog.value.menuForm.url = menu.url
  // dialog.value.menuForm.status = menu.status
  // dialog.value.menuForm = reactive({...menu})
  dialog.value.acceptValue(menu);
  // 打开对话框
  menusStore.openDialog();
}
// 删除菜单
const confirmEvent = (menu) => {
  // console.log(menu,'确定删除')
  menusStore.delMenuAction(menu.id);
};
const handleCheckChange = (v) => {
  console.log(v);
};
</script>

<template>
  <el-card>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="right">
      <el-button @click="addMenu" type="primary">新增菜单</el-button>
    </div>
    <el-tree
      :data="treeData"
      :props="{ label: 'name', children: 'children' }"
      show-checkbox
      @check-change="handleCheckChange"
    />
  </el-card>
  <Dialog ref="dialog" />
</template>

<style lang="scss" scoped>
.right {
  display: flex;
  justify-content: right;
  padding: 10px 0;
}
.el-card {
  height: 100%;
}
</style>
